<template>
  <div class="login">
    <!-- 标题开始 -->
    <div class="title">外卖点餐</div>
    <!-- 标题结束 -->

    <!-- 登录表单开始 -->
    <div class="loginForm">
      <div class="form">
        <van-form @submit="onSubmit(form)">
          <van-field
            v-model="form.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="form.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
    <!-- 登录表单结束 -->
  </div>
</template>

<script>
import { post_json } from "@/http/axios";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      form: {
        username: "admin1",
        password: "123321",
      },
    };
  },
  computed: {
    ...mapState("myUser", ["userInfo"]),
  },
  methods: {
    ...mapActions("myUser", ["getUserInfo"]),
    onSubmit() {
      post_json("/user/login", this.form).then((res) => {
        if (res.data.status == 200) {
          // 将token存储到本地
          localStorage.setItem("token", res.data.data.token);
          // 跳转到首页
          // console.log(res);
          this.getUserInfo();
          this.$router.push({
            path: "/manager",
          });
        }
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
.login {
  height: 100%;
  background-image: linear-gradient(#d9afd9, #97d9e1);
}
.login .title {
  position: relative;
  top: 140px;
  color: #fff;
  font-size: 36px;
}
.login .loginForm {
  padding: 1em;
  position: relative;
  top: 180px;
}
.login .loginForm .form {
  background-color: #fff;
  height: 220px;
  border-radius: 5px;
  padding-top: 40px;
  box-sizing: border-box;
}
</style>